<template>
  <section class="JsonEditor">
    <vue-json-editor
      v-model="json"
      showBtns
      :mode="'code'"
      lang="zh"
      @json-save="onJsonSave"
      style="height: 100%"
    ></vue-json-editor>
  </section>
</template>

<script>
import vueJsonEditor from 'vue-json-editor'

export default {
  name: 'JsonEditor',
  data() {
    return {
      json: {
        msg: 'demo of jsoneditor',
      },
    }
  },
  props: {},
  components: { vueJsonEditor },
  watch: {},
  computed: {},
  methods: {
    onJsonSave() {
      console.log(this.json)
    },
  },
  created() {},
  mounted() {},
}
</script>

<style scoped lang="scss">
.JsonEditor {
  height: 700px;
  width: 700px;

  ::v-deep .jsoneditor-vue {
    .jsoneditor-poweredBy {
      display: none;
    }
  }
}
</style>
